<template>
  <div class="NotBox">
      <!-- 被关注页面 -->
    <div class="NotBoxtitle">
          <span>消息中心</span>
    </div>
    <ul class="NotCount">
        <li class="notList" v-for="(item,index) in notList" :key="index">
            <p class="notListDate">{{item.date}}</p>
            <p class="notImgBox">
                <img :src="item.img" alt="">
            </p>
            <p class="notListText"><span>{{item.title}}</span>关注了<span>您</span></p>
        </li>
    </ul>
  </div>
</template>

<script>
import api from '../../api'
export default {
    data(){
        return {
            notList:[]
        }
    },
    mounted(){
        api.getFollow().then(res=>{
            //console.log(res.data.followList);
            this.notList=res.data.followList
        })
    }
}
</script>

<style>
.NotBox{
    width: 900px;
    height: 780px;
    background: #fff;
}
.NotBoxtitle{
    height: 50px;
    width: 100%;
    line-height: 50px;
    color: #999;
    text-align: left;
    border-bottom: 1px solid #ccc;
}
.NotBoxtitle>span{
    margin-left: 50px;
}
.NotCount{
    width: 880px;
    padding: 10px;
}
.notList{
    width: 100%;
    height: 105px;
    text-align: left;
}
.notList>.notListDate{
    width: 860px;
    height: 35px;
    line-height: 35px;
    background: #EBEBEB;
    padding-left: 20px;
}
.notImgBox{
    width: 40px;
    height: 40px;
    margin-left: 10px;
    margin-top: 10px;
    float: left;
}
.notImgBox>img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.notListText{
    height: 40px;
    line-height: 40px;
    margin-left: 10px;
    margin-top: 10px;
    float: left;
}
.notListText>span:first-child{
    color: #09ADE2;
    margin-right: 10px;
}
.notListText>span:last-child{
    margin-left: 10px;
}
</style>